<template>
  <el-container>
    <el-main>
      <el-form :model="form.model" :rules="form.rules" ref="formRef" label-width="122px">
        <el-form-item label="标题" prop="name">
          <el-input v-model="form.model.name" placeholder="请输入标题"></el-input>
        </el-form-item>

        <el-form-item label="支付方式类型">
          <el-radio-group v-model="form.model.type" :disabled="modal.params.type=='edit'">
            <el-radio label="wechat"> 微信支付V3版 </el-radio>
            <el-radio label="alipay">支付宝支付</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="商户类型">
          <el-radio-group v-model="form.model.params.mode">
            <el-radio label="0">普通商户</el-radio>
            <el-radio label="2">服务商</el-radio>
          </el-radio-group>
        </el-form-item>
        <div v-if="form.model.type == 'alipay'">
          <el-form-item label="商户号" prop="params.app_id">
            <el-input v-model="form.model.params.app_id" placeholder="请输入商户号"></el-input>
          </el-form-item>
          <el-form-item label="支付宝公钥证书" prop="params.alipay_public_cert_path">
            <div class="sa-w-360">
              <sa-uploader
                v-model="form.model.params.alipay_public_cert_path"
                fileType="cert"
                placeholder="请上传支付宝公钥证书 alipayCertPublicKey_RSA2.crt"
              ></sa-uploader>
            </div>
          </el-form-item>
          <el-form-item label="应用公钥证书" prop="params.app_public_cert_path">
            <div class="sa-w-360">
              <sa-uploader
                v-model="form.model.params.app_public_cert_path"
                fileType="cert"
                placeholder="请上传应用公钥证书 appCertPublicKey_***.crt"
              ></sa-uploader>
            </div>
          </el-form-item>
          <el-form-item label="支付宝根证书" prop="params.alipay_root_cert_path">
            <div class="sa-w-360">
              <sa-uploader
                v-model="form.model.params.alipay_root_cert_path"
                fileType="cert"
                placeholder="请上传支付宝根证书 alipayRootCert.crt"
              ></sa-uploader>
            </div>
          </el-form-item>
          <el-form-item label="私钥" prop="params.app_secret_cert">
            <el-input
              v-model="form.model.params.app_secret_cert"
              placeholder="请输入私钥"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="主商户ID"
            prop="params.service_provider_id"
            v-if="form.model.params.mode == '2'"
          >
            <el-input
              v-model="form.model.params.service_provider_id"
              placeholder="请输入主商户ID"
            ></el-input>
          </el-form-item>
        </div>
        <div v-else>
          <el-form-item
            label="主商户Appid"
            prop="params.app_id"
            v-if="form.model.params.mode == '2'"
          >
            <el-input v-model="form.model.params.app_id" placeholder="请输入主商户Appid"></el-input>
            <div class="waring-text">主商户绑定的公众号或者小程序的appid</div>
          </el-form-item>
          <el-form-item
            :label="form.model.params.mode == '2' ? '主商户号' : '商户号'"
            prop="params.mch_id"
          >
            <el-input v-model="form.model.params.mch_id" placeholder="请输入商户号"></el-input>
          </el-form-item>
          <el-form-item
            :label="form.model.params.mode == '2' ? '主商户密钥' : '商户密钥'"
            prop="params.mch_secret_key"
          >
            <el-input
              v-model="form.model.params.mch_secret_key"
              placeholder="请输入商户密钥"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="form.model.params.mode == '2' ? '主商户证书' : '商户证书'"
            prop="params.mch_public_cert_path"
          >
            <div class="sa-w-360">
              <sa-uploader
                v-model="form.model.params.mch_public_cert_path"
                fileType="cert"
              ></sa-uploader>
            </div>
          </el-form-item>
          <el-form-item
            :label="form.model.params.mode == '2' ? '主商户Key证书' : '商户Key证书'"
            prop="params.mch_secret_cert"
          >
            <div class="sa-w-360">
              <sa-uploader
                v-model="form.model.params.mch_secret_cert"
                fileType="cert"
              ></sa-uploader>
            </div>
          </el-form-item>
          <div v-if="form.model.params.mode == '2'">
            <el-form-item label="子商户号" prop="params.sub_mch_id">
              <el-input
                v-model="form.model.params.sub_mch_id"
                placeholder="请输入子商户号"
              ></el-input>
            </el-form-item>
            <el-form-item label="子商户秘钥">
              <el-input
                v-model="form.model.params.sub_mch_secret_key"
                placeholder="请输入子商户秘钥"
              ></el-input>
              <!-- 分销tip -PRO- -->
              <div class="waring-text sub-warning-text">
                如果需要打款功能（分销商佣金打款等）请配置子商户支付密钥
              </div>
            </el-form-item>
            <el-form-item label="子商户证书">
              <div class="sa-w-360">
                <sa-uploader
                  v-model="form.model.params.sub_mch_public_cert_path"
                  fileType="cert"
                ></sa-uploader>
              </div>
              <!-- 分销tip -PRO- -->
              <div class="waring-text sub-warning-text">
                如果需要打款功能（分销商佣金打款等）请配置子商户证书
              </div>
            </el-form-item>
            <el-form-item label="子商户Key证书">
              <div class="sa-w-360">
                <sa-uploader
                  v-model="form.model.params.sub_mch_secret_cert"
                  fileType="cert"
                ></sa-uploader>
              </div>
              <!-- 分销tip -PRO- -->
              <div class="waring-text sub-warning-text">
                如果需要打款功能（分销商佣金打款等）请配置子商户Key证书
              </div>
            </el-form-item>
          </div>
        </div>
        <el-form-item label="状态">
          <el-radio-group v-model="form.model.status">
            <el-radio label="normal">显示</el-radio>
            <el-radio label="disabled">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </el-main>
    <el-footer class="sa-footer--submit">
      <el-button
        v-if="modal.params.type == 'add'"
        v-auth="'shop.admin.payconfig.add'"
        type="primary"
        @click="confirm"
        >保存</el-button
      >
      <el-button
        v-if="modal.params.type == 'edit'"
        v-auth="'shop.admin.payconfig.edit'"
        type="primary"
        @click="confirm"
        >更新</el-button
      >
    </el-footer>
  </el-container>
</template>
<script setup>
  import { onMounted, reactive, ref, unref } from 'vue';
  import { api } from './payConfig.service';
  import { cloneDeep } from 'lodash';

  const emit = defineEmits(['modalCallBack']);
  const props = defineProps({
    modal: {
      type: Object,
    },
  });
  const value1 = ref(false);
  let formRef = ref(null);
  const form = reactive({
    model: {
      name: '',
      status: 'normal',
      params: {
        app_id: '',
        mode: '0',
        mch_secret_cert: '',
        mch_public_cert_path: '',
        alipay_public_cert_path: '',
        app_public_cert_path: '',
        alipay_root_cert_path: '',
        app_secret_cert: '',
        service_provider_id: '',
        mch_id: '',
        mch_secret_key: '',
        sub_mch_id: '',
        sub_mch_secret_key: '',
        sub_mch_public_cert_path: '',
        sub_mch_secret_cert: '',
      },
      type: 'wechat',
    },
    rules: {
      name: [{ required: true, message: '请输入标题', trigger: 'blur' }],
      params: {
        mch_id: [{ required: true, message: '请输入商户号', trigger: 'blur' }],
        mch_secret_key: [{ required: true, message: '请输入商户密钥', trigger: 'blur' }],
        mch_secret_cert: [{ required: true, message: '请选择商户 key 证书', trigger: 'blur' }],
        mch_public_cert_path: [{ required: true, message: '请选择商户证书', trigger: 'blur' }],
        app_id: [{ required: true, message: '请输入主商户appid', trigger: 'blur' }],
        sub_mch_id: [{ required: true, message: '请输入子商户号', trigger: 'blur' }],
        alipay_public_cert_path: [
          { required: true, message: '请选择支付宝公钥证书', trigger: 'blur' },
        ],
        app_public_cert_path: [{ required: true, message: '请选择应用公钥证书', trigger: 'blur' }],
        alipay_root_cert_path: [{ required: true, message: '请选择支付宝根证书', trigger: 'blur' }],
        app_secret_cert: [{ required: true, message: '请输入私钥', trigger: 'blur' }],
        service_provider_id: [{ required: true, message: '请输入主商户ID', trigger: 'blur' }],
      },
    },
  });
  const loading = ref(false);
  const uploadRef = ref(null);

  // 获取详情
  async function getDetail(id) {
    loading.value = true;
    const { error, data } = await api.detail(id);
    error === 0 && (form.model = data);
    loading.value = false;
  }
  // 表单关闭时提交
  async function confirm() {
    // 表单验证
    unref(formRef).validate(async (valid) => {
      if (!valid) return;
      let submitForm = cloneDeep(form.model);
      const { error } =
        props.modal.params.type == 'add'
          ? await api.add(submitForm)
          : await api.edit(props.modal.params.id, submitForm);
      if (error == 0) {
        emit('modalCallBack', { event: 'confirm' });
      }
    });
  }
  async function init() {
    if (props.modal.params.id) {
      await getDetail(props.modal.params.id);
    }
  }
  onMounted(() => {
    init();
  });
</script>
<style lang="scss" scoped>
  .header {
    width: 100%;
    height: 40px;
    color: #434343;
    padding-left: 16px;
    background: var(--sa-background-hex-hover);
    margin: 0 0 16px 0;
    font-weight: 500;
    font-size: 14px;
  }
  .openswitch {
    color: var(--el-color-primary);
  }
  .pointer {
    cursor: pointer;
  }
  .icon-warning {
    width: 14px;
    height: 14px;
    display: flex;
    margin-left: 8px;
  }
  .waring-text {
    width: 100%;
    color: var(--sa-subfont);
    font-size: 14px;
    line-height: 18px;
    margin-top: 4px;
  }
  .sub-warning-text {
    font-size: 12px;
    line-height: 16px;
  }
  .upload {
    width: 56px;
    height: 32px;
  }
</style>
